<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载全球街景</title>
    <script type="text/javascript"
        src="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/cesium/1.109.0/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .btn-group {
            position: absolute;
            z-index: 99999;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <button type="button" class="btn-group" onclick="loadTileset()">街景模式</button>
    </div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYmM3MjllNS04YTg2LTQ3ZWMtOWFmNi1mN2JiZjk1NWI3MzAiLCJpZCI6MzgzOTgsImlhdCI6MTY3NzI4NjYwNn0.ZGHM2hyly98PYjpQ_krciBisOsevj9VEG_0dif7gT70'
        const viewer = new Cesium.Viewer('cesiumContainer', {});

        //街景全局状态
        let isStreetViewVisible = false;

        async function loadTileset() {
            var imgLayer = new Cesium.UrlTemplateImageryProvider({
                url: "https://gac-geo.googlecnapps.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m8!1e2!2ssvv!4m2!1scb_client!2sapiv3!4m2!1scc!2s*211m3*211e3*212b1*213e2*211m3*211e2*212b1*213e2!3m3!3sUS!12m1!1e68!4e0",
                minimumLevel: 0,
                maximumLevel: 18,
            }
            );
            viewer.imageryLayers.addImageryProvider(imgLayer);

            viewer.scene.globe.depthTestAgainstTerrain = true;
            //深度检测开起,默认是关闭的
            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);

            handler.setInputAction(function (click) {                                //设置监听事件，使用setInputAction进行监听，可监听点击、移入移除移动事件等
                if (isStreetViewVisible) {
                    // 如果街景视图当前可见，则不执行以下逻辑
                    return;
                }
                var ray = viewer.camera.getPickRay(click.position);                 //cesium点击射线

                var position = viewer.scene.globe.pick(ray, viewer.scene);          //　返回y一个ray和地球表面的一个交点的Cartesian3坐标。

                if (position) {                                                     //如果position不为空
                    console.log("点击地方的笛卡尔3坐标：", position);
                    var cartesian3Value = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);   //转弧度
                    console.log("点击地方的W84弧度坐标：", cartesian3Value);
                    var longitude = Cesium.Math.toDegrees(cartesian3Value.longitude);
                    var latitude = Cesium.Math.toDegrees(cartesian3Value.latitude);
                    var height = cartesian3Value.height;
                    console.log("点击地方的W84经纬度坐标：", longitude, ",", latitude, ",", height);
                    showStreetView(longitude, latitude);

                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);                               //定义事件类型
        }


        const showStreetView = (longitude, latitude) => {
            isStreetViewVisible = true;
            const overlay = document.createElement('div');
            overlay.style.position = 'fixed';
            overlay.style.top = '0';
            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.zIndex = '10000';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

            // 创建iframe
            const iframe = document.createElement('iframe');
            iframe.src = `https://street.giiiis.com/index.html?lat=${latitude}&lng=${longitude}`;
            iframe.style.width = '100%';
            iframe.style.height = '100%';

            // 创建退出按钮
            const closeButton = document.createElement('button');
            closeButton.innerText = '退出';
            closeButton.style.position = 'absolute';
            closeButton.style.top = '22px'; // 调整为所需的位置
            closeButton.style.left = '20px'; // 调整为所需的位置
            closeButton.style.zIndex = '10001'; // 确保按钮在最前面
            closeButton.style.padding = '12px 22px'; // 按钮大小
            closeButton.style.fontSize = '14px'; // 字体大小
            closeButton.style.cursor = 'pointer'; // 鼠标样式
            closeButton.style.border = 'none'; // 按钮背景颜色
            closeButton.style.outline = 'none'; // 按钮背景颜色
            // 配置退出按钮的点击事件
            closeButton.addEventListener('click', () => {
                document.body.removeChild(overlay);
            });

            overlay.appendChild(iframe);
            overlay.appendChild(closeButton); // 将退出按钮添加到overlay中
            document.body.appendChild(overlay);

            // 阻止在iframe上的点击事件冒泡
            iframe.addEventListener('click', (event) => {
                event.stopPropagation();
            });
        };

    </script>
</body>

</html>